<!DOCTYPE html>
<html>
<head>
    <title>我的游记</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的游记</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="container travels">
    <dl class="list" render-loop="list">
        <dd>
            <!--动态渲染a标签-->
            <a href="editTravels.html" render-key="list.id" render-fun="handle">
                <img render-src="list.coverUrl">
                <h6 class="title" render-html="list.title"></h6>
                <p>最近更新时间 <span render-html="list.lastUpdateTime"></span>
                    <span class="span-right">
                        <i class="fa fa-heart"></i><span>0</span>收藏
                        <i class="fa fa-thumbs-o-up"></i><span render-key="list.id" render-fun="manage">0</span>点赞
                    </span>
                </p>
            </a>
        </dd>
    </dl>
</div>
</body>
<script>

    // 定义总页数
    var pages;
    // 定义当前页--用于传给后台需要查询的页面
    var currentPage;
    // 定义一个当前页面的游记数据--防止翻页后上一页数据丢失
    var travels;

    $(function () {
        // 获取当前用户信息
        var user = JSON.parse(sessionStorage.getItem("user"));

        // 页面加载完毕立即发送请求查询个人游记信息
        $.get("/users/" + user.id + "/travels",{pageSize:4}, function (data) {
            // console.log(pageInfo);
            // arguments--回调函数从后台传回的数据数组
            console.log(arguments);
            // 渲染数据
            renderView(data);
            // 设置总页数的值
            pages = data.pages;
            // 保存游记数据到全局变量travels中
            travels = data.list;

            currentPage = data.pageNum;
        })

        // 渲染页面的函数
        function renderView(data) {
            $(".travels").renderValues(data, {
                // 属性名就是函数的名称
                handle:function (ele, value) {
                    // 动态渲染a标签
                    $(ele).attr("href", "/mine/editTravels.html?id="+value);
                },
                manage:function (ele, value) {
                    //将异步请求变成同步请求,可以回显点赞数
                    $.ajax({
                        url: "/travels/"+value+"/greats",
                        type: "get",
                        data: {greatType:"travel_id"},
                        async: false,
                        success: function (data) {
                            $(ele).html(data.greats)
                        }
                    })
                }
            })

        }

        // 如何做分页
        /**
         * 1. 判断是否到达网页底部
         *    屏幕溢出的高度 + 屏幕的高度 >= 网页的高度, 触发分页查询新的页面
         *    设置一个判断屏幕滑动是否到达网页底部的函数
         * 2. 监听屏幕滑动事件
         *    当到达网页底部, 则发送异步请求查询分页数据
         */

        // 屏幕滑动监听事件
        $(window).scroll(function () {
            if (isEnd()){
                // 到达网页底部, 发送异步请求
                // 判断当前页是否是最后一页, 如果不是, 发送请求, 如果是, 则提醒已到底部
                if (currentPage < pages){
                    // 当前页+1进行查询
                    currentPage ++;
                    // 发送请求
                    $.get("/users/" + user.id + "/travels",{"currentPage":currentPage, "pageSize":4}, function (data) {
                        // 将上一页的游记数据和当前页的游记数据进行合并--保证上一页的游记数据不会丢失
                        $.merge(travels, data.list);
                        // 渲染数据
                        renderView({list:travels});

                    });
                } else {
                    // 提示已到底部
                    $(document).dialog({
                        type : 'notice',
                        infoText: '已到底部',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        })

        // 判断是否滑动到达网页底部的函数
        function isEnd() {
            return $(window).height() + $(window).scrollTop() >= $(document).height();
        }
    })
</script>


</html>
